<template>
	<div class="daihuosousuo">
		<!--上级-->
		<div class="fensiqian">
			<div class="darensou">
				<div class="darensou1">
					<input type="search" value="" placeholder="请输入商品名称" />
					<button style="cursor: pointer;">
						<i class="el-icon-search"></i>
					</button>
				</div>
				<div class="darensou2">
				    今日剩余搜索次数 <span>50</span> 次
				</div>
			</div>
			
			<div class="darenbiaoqian">
				<div class="darenbiaoqian1">
					达人标签
				</div>
				<div class="darenbiaoqian2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="darenbiaoqian3">
					<div class="xuan" v-for="(item,index) in 50" :key="index">
						<input type="checkbox" :id="item" name="zhong" :value="item" /><label :for="item">薯条可乐</label>
					</div>
				</div>
			</div>
			
			<div class="darenfensi">
				<div class="darenfensi1">
					粉丝数
				</div>
				<div class="darenfensi2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="darenfensi3">
					<div class="darenfensi3_1">
						<ul>
							<li v-for="(item,index) in 6" :key="index">
								10万~50万
							</li>
						</ul>
					</div>
					<div class="darenfensi3_2">
						<div class="darenfensi_suan1">
							<input type="text" v-model="wan1" value="" />万
						</div>
						<div class="darenfensi_suan2"></div>
						<div class="darenfensi_suan3">
							<input type="text" v-model="wan2" value="" />万
						</div>
						<div class="darenfensi_suan4">
							确定
						</div>
					</div>
				</div>
			</div>
			
			<div class="darenshuxing">
				<div class="darenshuxing1">
					达人属性
				</div>
				<div class="darenshuxing2">
					<div :class="{'buxian1':!value,'buxian2':value}">
						不限
					</div>
				</div>
				<div class="fenxing_xiala">
					<div class="fenxing_xiala1">
						<el-select v-model="value" clearable placeholder="达人性别">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala2">
						<el-select v-model="value" clearable placeholder="达人所在地">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value" clearable placeholder="达人认证">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			
			<div class="darenshuxing">
				<div class="darenshuxing1">
					粉丝属性
				</div>
				<div class="darenshuxing2">
					<div :class="{'buxian1':!value1,'buxian2':value1}">
						不限
					</div>
				</div>
				<div class="fenxing_xiala">
					<div class="fenxing_xiala1">
						<el-select v-model="value1" clearable placeholder="达人性别">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala2">
						<el-select v-model="value1" clearable placeholder="粉丝年龄">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value1" clearable placeholder="粉丝地域">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value1" clearable placeholder="粉丝质量">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			
			<div class="fensidaizhuang">
				<div class="fensidaizhuang1">
					主营品类
				</div>
				<div class="fensidaizhuang2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="fensidaizhuang3">
					<div class="fensidaizhuang3_2">
						<ul>
							<li v-for="(item,index) in 30" :key="index">
								3C数据
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="fensizhuyin">
				<div class="fensizhuyin1">
					主营品类
				</div>
				<div class="fensizhuyin2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="fensizhuyin3">
					<div class="fensizhuyin3_1">
						<ul>
							<li v-for="(item,index) in 6" :key="index">
								0-50
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"daihuosousuo",
		data(){
			return{
				//达人属性
				options: [{
					value: '男',
					label: '男'
				}, {
				  value: '女',
				  label: '女'
				}],
				value: '',
				//粉丝属性
				options1: [{
					value1: '小猪',
					label1: '小猪'
				}, {
				  value1: '小羊',
				  label1: '小羊'
				}],
				value1: '',
				
				//两个数字范围万
				wan1:'',
				wan2:'',
				
				fuxuan:[]
			}
		},
		activated() {
			
		},
		mounted:function(){
			var _self=this;
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//点击获取复选框中的值
			$(".xuan input").change(function(val){
				_self.fuxuan=[];
				$("input[name='zhong']:checkbox:checked").each(function(){ 
					_self.fuxuan.push($(this).val()) 
				})
				console.log(_self.fuxuan)
			})
			//达人标签
			$(".darenbiaoqian3").click(function(){
				$(this).siblings(".darenbiaoqian2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			
			$(".darenbiaoqian2 .buxian1").click(function(){
				//点击让复选框全部不选中
				$('input[name="zhong"]').prop("checked",false);
				_self.fuxuan=[];
			})
			
			//粉丝数
			$(".darenfensi3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//监听input框的文字输入事件
			$(".darenfensi3_2 input").keyup(function(){
				if(_self.wan1 || _self.wan2){
					$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
						"background-color": "#fff",
						"color":"#999"
					})
					
					$(this).parents(".darenfensi3_2").siblings(".darenfensi3_1").children("ul").children("li").css({
						"background-color": "#fff",
						"color":"#999"
					})
				}else{
					$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
						"background-color": "#0091FF",
						"color":"#fff"
					})
				}
			})
			
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".darenfensi2").siblings(".darenfensi3").children(".darenfensi3_1").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//主营品类
			$(".fensidaizhuang3_2 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".fensidaizhuang3").siblings(".fensidaizhuang2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".fensidaizhuang2").siblings(".fensidaizhuang3").children(".fensidaizhuang3_2").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".fensizhuyin3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".fensizhuyin3").siblings(".fensizhuyin2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			$(".buxian1").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".fensizhuyin2").siblings(".fensizhuyin3").children(".fensizhuyin3_1").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
		},
		
		methods:{

		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.daihuosousuo{
		.fensiqian{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 1rem 0.8rem;
			.darensou{
				
				.darensou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #D4D4D4;
					
					input{
						border: none;
						outline: none;
						width: 7rem;
						height: 1.1rem;
						letter-spacing: 0.02rem;
						padding-left:0.4rem ;
						font-size: 0.4rem;
					}
					input::placeholder{
						color: #D3D3D3;
						font-size: 0.35rem;
					}
					button{
						border: none;
						outline: none;
						padding: 0.3rem;
						background-color: #fff;
						font-size: 0.4rem;
					}
				}
				.darensou2{
					float: left;
					margin-left:1rem ;
					color: #333333;
					font-size: 0.5rem;
					letter-spacing: 0.05rem;
					margin-top:0.2rem ;
					
					span{
						color: #0091FF;
					}
				}
			}
			.darensou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.darenbiaoqian{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenbiaoqian1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenbiaoqian2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.darenbiaoqian3{
					flex: 11;
					.xuan{
						margin-left:1rem ;
						margin-bottom:1rem ;
						float: left;
						display: flex;
						justify-content: space-around;
						align-items: center;
						input{
							cursor: pointer;
						}
						label{
							padding-left:0.2rem ;
							cursor: pointer;
							color: #999;
							font-size: 0.45rem;
						}
						label:hover{
							color: #0091ff;
						}
					}
				}
				.darenbiaoqian3::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			
			.darenfensi{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenfensi1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenfensi2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.darenfensi3{
					flex: 11;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.darenfensi3_1{
						flex: 2.65;
						
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.darenfensi3_2{
						text-align: right;
						flex: 1;
						display: flex;
						align-items: center;
						
						.darenfensi_suan1{
							color: #999999;
							font-size: 0.4rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							input{
								width:1.5rem;
								height: 0.6rem;
								border: 1px solid #D4D4D4;
								outline: none;
								margin-right:0.3rem ;
								font-size: 0.35rem;
								padding: 0 0.2rem;
							}
						}
						.darenfensi_suan2{
							width: 0.6rem;
							height: 0.02rem;
							background-color: #D4D4D4;
							margin: 0 0.4rem;
							margin-top:0.1rem ;
						}
						.darenfensi_suan3{
							color: #999999;
							font-size: 0.4rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-right:0.4rem ;
							input{
								width:1.5rem;
								height: 0.6rem;
								border: 1px solid #D4D4D4;
								outline: none;
								margin-right:0.3rem ;
								font-size: 0.35rem;
								padding: 0 0.2rem;
							}
						}
						.darenfensi_suan4{
							color: #fff;
							background-color: #0091FF;
							padding: 0.1rem 0.3rem;
							font-size: 0.35rem;
							cursor: pointer;
						}
						@keyframes jello-horizontal {
						  0% {
						    transform: scale3d(1, 1, 1);
						  }
						  30% {
						    transform: scale3d(1.25, 0.75, 1);
						  }
						  40% {
						    transform: scale3d(0.75, 1.25, 1);
						  }
						  50% {
						    transform: scale3d(1.15, 0.85, 1);
						  }
						  65% {
						    transform: scale3d(0.95, 1.05, 1);
						  }
						  75% {
						    transform: scale3d(1.05, 0.95, 1);
						  }
						  100% {
						    transform: scale3d(1, 1, 1);
						  }
						}
						
						.darenfensi_suan4:hover{
							animation: jello-horizontal 0.9s both;
						}
					}
				}
			}
			
			.darenshuxing{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				.darenshuxing1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenshuxing2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
					.buxian2{
						cursor: pointer;
						color: #999;
						font-size: 0.4rem;
						background-color: #fff;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.fenxing_xiala{
					flex: 11;
					
					.fenxing_xiala1{
						margin-left:0.8rem ;
						float: left;
						display: flex;
					}
					.fenxing_xiala2{
						float: left;
						margin-left:1rem ;
						display: flex;
					}
					.fenxing_xiala3{
						float: left;
						margin-left:1rem ;
						display: flex;
					}
					
				}
				.fenxing_xiala::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			
			.fensidaizhuang{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.fensidaizhuang1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.fensidaizhuang2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.fensidaizhuang3{
					flex: 11;
					
					.fensidaizhuang3_2{
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								margin-bottom:0.4rem ;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			
			.fensizhuyin{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.fensizhuyin1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.fensizhuyin2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.fensizhuyin3{
					flex: 11;
					
					.fensizhuyin3_1{
						
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.fensizhuyin3_2{
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								margin-bottom:0.4rem ;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
		}
		
	}
	
	/*修改elementUI中的样式，用的是 /deep/ 来修改*/
	.el-scrollbar/deep/ .el-select-dropdown__item{
		padding-left:0.5rem ;
	}
</style>
